Component({
  // 允许设置图片更多样式，比如设置为圆形
  externalClasses: ['more-style'],

  properties: {
    // 图片地址
    src: String,
    // 指定显示的宽高，单位rpx，只需定义其一
    width: Number,
    height: Number,
    // 指定宽高比例，否则按计算的比例显示
    ratio: {
      type: Number,
      value: 0,
    },
    // 是否能预览
    canPreview: {
      type: Boolean,
      value: false,
    },
  },

  data: {
    // 让最终显示的宽高初始值为 0，防止计算前后的变化暴露在页面上
    view_width: 0,
    view_height: 0,
  },

  methods: {
    // 预览
    previewImg() {
      wx.previewImage({
        urls: [this.data.src]
      })
    },

    /**
     * 图片加载后按原图比例计算图片最终的显示宽高，
     * 如果有指定比例，则按指定的比例显示。
     * 可以绑定 imgLoad 监听事件获取图片最终显示的宽高 view_width、view_height
     */
    imgLoad ({ detail }) {
      let ratio = Number(this.data.ratio) || (detail.width / detail.height)
      let width = Number(this.data.width)
      let height = Number(this.data.height)
      let view_width = 0
      let view_height = 0
      // 如果定义了宽度
      if (width) {
        view_width = width
        view_height = width / ratio
      }
      // 如果定义了高度
      if (height) {
        view_width = height * ratio
        view_height = height
      }
      this.setData({
        view_width,
        view_height,
      }, () => {
        // 将 view_width、view_height 传递给组件使用者绑定的 imgLoad 监听事件
        this.triggerEvent('imgLoad', { view_width, view_height })
      })
    },
  },
})